{% extends 'base.html' %}
{% load tz %}
{% load i18n %}
{% load static %}
{% load  sizeformat %}

{% block title %}{% translate '挂载云硬盘' %}{% endblock %}

{% block boby %}
    <div class="container-fluid col-12">
        <div class="card">
            <div class="card-header">
                <span class="card-title"><strong>{% translate '挂载云硬盘' %}</strong></span>
                <div class="float-right">
                    <a class="btn btn-sm btn-success" href="{% url 'vdisk:vdisk-create' %}">{% translate '创建云硬盘' %}</a>
                    <a class="btn btn-sm btn-info" href="{% url 'vdisk:vdisk-list' %}">{% translate '云硬盘列表' %}</a>
                </div>
            </div>
            <div class="card-body">
                <div class="">
                    <div class="text-primary h4">{% translate '虚拟机信息' %}:</div>
                    <div class="">
                        <dl class="row">
                            <dt class="col-2 text-right">{% translate '虚拟机UUID' %}:</dt> <dd class="col-10" id="id-mount-vm-uuid">{{ vm.hex_uuid }}</dd>
                            <dt class="col-2 text-right">{% translate '虚拟机IP地址' %}:</dt> <dd class="col-10">{{ vm.ipv4 }}</dd>
                            <dt class="col-2 text-right">{% translate '镜像' %}:</dt> <dd class="col-10">{{ vm.image_name }}</dd>
                            <dt class="col-2 text-right">{% translate '机组' %}:</dt> <dd class="col-10">{{ vm.host.group }}</dd>
                            <dt class="col-2 text-right">{% translate '备注' %}:</dt> <dd class="col-10">{{ vm.remarks }}</dd>
                        </dl>
                    </div>
                </div>
                <hr style=" height:1px;border:1px;border-top:1px solid #185598;"/>
                <div>
                    <div class="row">
                        <div class="text-success h4 col-sm-4">{% translate '可供挂载的云硬盘' %}：</div>
                        <div class="float-right col-sm-8">
                            <form role="form" class="form-horizontal" method="get" action="">
                                <div class="input-group" style="">
                                    <div class="input-group-prepend">
                                        <label class="input-group-text" for="id-center">{% translate '关键字' %}</label>
                                    </div>
                                    <input type="text" class="form-control" name="search" value="{{ search }}"
                                           id="id-center" placeholder="{% translate '搜 UUID、备注' %}"/>
                                    <div class="input-group-append">
                                        <button type="submit" class="btn btn-primary form-control">{% translate '筛选' %}</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <table class="table table-bordered table-disk-list" style="word-wrap:break-word;word-break:break-all;">
                <thead class="table-light">
                <tr>
                    <th>UUID</th>
                    <th>{% translate '机组' %}</th>
                    <th>{% translate '存储池' %}</th>
                    <th>{% translate '容量' %}</th>
                    <th>{% translate '用户' %}</th>
                    <th>{% translate '创建时间' %} <span>{{ request.session.useTimeZoneOffset }}</span></th>
                    <th>{% translate '状态' %}</th>
                    <th>{% translate '备注' %}</th>
                    <th>{% translate '操作' %}</th>
                </tr>
                </thead>
                <tbody>
                {% for disk in vdisks %}
                    <tr id="tr_{{ disk.uuid }}">
                        <td><b>{{ disk.uuid }}</b></td>
                        <td>{{ disk.quota.group }}</td>
                        <td>{{ disk.quota }}</td>
                        <td>{{ disk.size|sizeformat:'GB' }}</td>
                        <td>{{ disk.user }}</td>
                        {% timezone request.session.useTimeZone|default:'UTC' %}
                        <td>{{ disk.create_time }}</td>
                        {% endtimezone %}
                         <td>
                            {%if disk.enable%}
                                <i class="fa fa-check"></i>
                            {%else%}
                                <i class="fa fa-times"></i>
                            {%endif%}
                        </td>
                        <td>
                            <span>{{ disk.remarks|default_if_none:'' }}</span>
                        </td>
                        <td>
                            <button type="button" class="btn btn-xs btn-success btn-disk-mount" data-disk-uuid="{{ disk.uuid }}">{% translate '挂载' %}</button>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            {% with page_list=page_nav.page_list previous=page_nav.previous next=page_nav.next %}
                {% if page_list %}
                    <div class="card-footer">
                        <nav aria-label="Page navigation">
                            <ul class="pagination"  style="margin:0;">
                                {% if previous %}
                                    <li class="page-item"><a class="page-link" href="?{{ previous }}" aria-label="Previous"><span
                                            aria-hidden="true">&laquo;</span></a></li>
                                {% else %}
                                    <li class="page-item disable"><span class="page-link" aria-hidden="true">&laquo;</span></li>
                                {% endif %}
                                {% for disp, query, active in page_list %}
                                    {% if active %}
                                        <li class="page-item active"><a class="page-link" href="?{{ query }}">{{ disp }}</a></li>
                                    {% else %}
                                        <li class="page-item"><a class="page-link" href="?{{ query }}">{{ disp }}</a></li>
                                    {% endif %}
                                {% endfor %}
                                {% if next %}
                                    <li class="page-item"><a class="page-link" href="?{{ next }}" aria-label="Next"><span
                                            aria-hidden="true">&raquo;</span></a></li>
                                {% else %}
                                    <li class="page-item disable"><span class="page-link" aria-hidden="true">&raquo;</span></li>
                                {% endif %}
                            </ul>
                        </nav>
                    </div>
                {% endif %}
            {% endwith %}
        </div>
    </div>
{% endblock %}

{% block script %}
    <script type="text/javascript" src="{% static 'evcloud/common.js' %}"></script>
    <script type="text/javascript" src="{% static 'vms/vms_mount_disk.js' %}"></script>
{% endblock %}

